<template>
  <!-- <div> -->
  <div class="charts" ref="box">Charts</div>
  <!-- </div> -->
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Charts',
  props: {
    options: {
      type: Object,
      require: true
      // default: () => { }
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.drawLineCharts()
  },
  methods: {
    drawLineCharts() {
      // 初始化图表
      this.myChart = echarts.init(this.$refs.box)
      // 生成设置
      this.myChart.setOption(this.options)
    }
  },
  watch: {
    options: function (newOptions, oldOptions) {
      if (newOptions) {
        this.myChart.setOption(newOptions)
      }
    }
  }
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
